<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquicktransition.cpp -->
  <title>Transition QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >Transition QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Transition QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$Transition-brief -->
<p>Defines animated transitions that occur on state changes. <a href="#details">更多...</a></p>
<!-- @@@Transition -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr></table></div><ul>
<li><a href="qml-qtquick-transition-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#animations-prop">animations</a></b></b> : list&lt;Animation&gt;</li>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#enabled-prop">enabled</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#from-prop">from</a></b></b> : string</li>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#reversible-prop">reversible</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#running-prop">running</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-transition.html#to-prop">to</a></b></b> : string</li>
</ul>
<!-- $$$Transition-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p>A Transition defines the animations to be applied when a <a href="qml-qtquick-state.html">State</a> change occurs.</p>
<p>For example, the following <a href="qml-qtquick-rectangle.html">Rectangle</a> has two states: the default state, and an added &quot;moved&quot; state. In the &quot;moved state, the rectangle's position changes to (50, 50). The added Transition specifies that when the rectangle changes between the default and the &quot;moved&quot; state, any changes to the <code>x</code> and <code>y</code> properties should be animated, using an <code>Easing.InOutQuad</code>.</p>
<pre class="qml">

  import QtQuick 2.0

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">id</span>: <span class="name">rect</span>
      <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
      <span class="name">color</span>: <span class="string">&quot;red&quot;</span>

      <span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
          <span class="name">id</span>: <span class="name">mouseArea</span>
          <span class="name">anchors</span>.fill: <span class="name">parent</span>
      }

      <span class="name">states</span>: <span class="name">State</span> {
          <span class="name">name</span>: <span class="string">&quot;moved&quot;</span>; <span class="name">when</span>: <span class="name">mouseArea</span>.<span class="name">pressed</span>
          <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">x</span>: <span class="number">50</span>; <span class="name">y</span>: <span class="number">50</span> }
      }

      <span class="name">transitions</span>: <span class="name">Transition</span> {
          <span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span> }
      }
  }

</pre>
<p>Notice the example does not require <a href="qml-qtquick-propertyanimation.html#to-prop">to</a> and <a href="qml-qtquick-propertyanimation.html#from-prop">from</a> values for the <a href="qml-qtquick-numberanimation.html">NumberAnimation</a>. As a convenience, these properties are automatically set to the values of <code>x</code> and <code>y</code> before and after the state change; the <code>from</code> values are provided by the current values of <code>x</code> and <code>y</code>, and the <code>to</code> values are provided by the <a href="qml-qtquick-propertychanges.html">PropertyChanges</a> object. If you wish, you can provide <a href="qml-qtquick-propertyanimation.html#to-prop">to</a> and <a href="qml-qtquick-propertyanimation.html#from-prop">from</a> values anyway to override the default values.</p>
<p>By default, a Transition's animations are applied for any state change in the parent item. The Transition <a href="qml-qtquick-transition.html#from-prop">from</a> and <a href="qml-qtquick-transition.html#to-prop">to</a> values can be set to restrict the animations to only be applied when changing from one particular state to another.</p>
<p>To define multiple transitions, specify <a href="qml-qtquick-item.html#transitions-prop">Item::transitions</a> as a list:</p>
<pre class="qml">

  <span class="name">transitions</span>: [
    <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> {
        <span class="name">from</span>: <span class="string">&quot;stop&quot;</span>; <span class="name">to</span>: <span class="string">&quot;go&quot;</span>
        <span class="type"><a href="qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">target</span>: <span class="name">stopLight</span>
                            <span class="name">properties</span>: <span class="string">&quot;color&quot;</span>; <span class="name">duration</span>: <span class="number">1000</span> }
    },
    <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> {
        <span class="name">from</span>: <span class="string">&quot;go&quot;</span>; <span class="name">to</span>: <span class="string">&quot;stop&quot;</span>
        <span class="type"><a href="qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">target</span>: <span class="name">goLight</span>
                            <span class="name">properties</span>: <span class="string">&quot;color&quot;</span>; <span class="name">duration</span>: <span class="number">1000</span> }
    } ]

</pre>
<p>If multiple Transitions are specified, only a single (best-matching) Transition will be applied for any particular state change. In the example above, when changing to <code>state1</code>, the first transition will be used, rather than the more generic second transition.</p>
<p>If a state change has a Transition that matches the same property as a <a href="qml-qtquick-behavior.html">Behavior</a>, the Transition animation overrides the <a href="qml-qtquick-behavior.html">Behavior</a> for that state change.</p>
<p><b>请参考</b> <a href="qtquick-statesanimations-animations.html">Animation and Transitions in Qt Quick</a>，<a href="qtquick-animation-example.html#states">States example</a>，<a href="qtquick-statesanimations-states.html">Qt Quick States</a> 和 <a href="../qtqml/qtqml-index.html">Qt QML</a>。</p>
<!-- @@@Transition -->
<h2>属性文档</h2>
<!-- $$$animations -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="animations-prop">
<td class="tblQmlPropNode"><p>
<a name="animations-prop"></a><span class="qmldefault">[default] </span><span class="name">animations</span> : <span class="type"><a href="../qtqml/qml-list.html">list</a></span>&lt;<span class="type"><a href="qml-qtquick-animation.html">Animation</a></span>&gt;</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds a list of the animations to be run for this transition.</p>
<pre class="qml">

  <span class="name">transitions</span>: <span class="name">Transition</span> {
      <span class="type"><a href="qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">duration</span>: <span class="number">3000</span> }
      <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">3000</span> }
  }

</pre>
<p>The top-level animations are run in parallel. To run them sequentially, define them within a <a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a>:</p>
<pre class="qml">

  <span class="name">transitions</span>: <span class="name">Transition</span> {
      <span class="name">to</span>: <span class="string">&quot;brighter&quot;</span>
      <span class="name">reversible</span>: <span class="number">true</span>
      <span class="type"><a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> {
          <span class="type"><a href="qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">property</span>: <span class="string">&quot;x&quot;</span>; <span class="name">duration</span>: <span class="number">1000</span> }
          <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
      }
  }

</pre>
</div></div><!-- @@@animations -->
<br/>
<!-- $$$enabled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="enabled-prop">
<td class="tblQmlPropNode"><p>
<a name="enabled-prop"></a><span class="name">enabled</span> : <span class="type"><a href="../qtqml/qml-bool.html">bool</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds whether the Transition will be run when moving from the <code>from</code> state to the <code>to</code> state.</p>
<p>By default a Transition is enabled.</p>
<p>Note that in some circumstances disabling a Transition may cause an alternative Transition to be used in its place. In the following example, although the first Transition has been set to animate changes from &quot;state1&quot; to &quot;state2&quot;, this transition has been disabled by setting <code>enabled</code> to <code>false</code>, so any such state change will actually be animated by the second Transition instead.</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
      <span class="name">states</span>: [
          <span class="type"><a href="qml-qtquick-state.html">State</a></span> { <span class="name">name</span>: <span class="string">&quot;state1&quot;</span> },
          <span class="type"><a href="qml-qtquick-state.html">State</a></span> { <span class="name">name</span>: <span class="string">&quot;state2&quot;</span> }
      ]
      <span class="name">transitions</span>: [
          <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> { <span class="name">from</span>: <span class="string">&quot;state1&quot;</span>; <span class="name">to</span>: <span class="string">&quot;state2&quot;</span>; <span class="name">enabled</span>: <span class="number">false</span> },
          <span class="type"><a href="qml-qtquick-transition.html">Transition</a></span> {
              <span class="comment">// ...</span>
          }
      ]
  }

</pre>
</div></div><!-- @@@enabled -->
<br/>
<!-- $$$from -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="from-prop">
<td class="tblQmlPropNode"><p>
<a name="from-prop"></a><span class="name">from</span> : <span class="type"><a href="../qtqml/qml-string.html">string</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties indicate the state changes that trigger the transition.</p>
<p>The default values for these properties is &quot;*&quot; (that is, any state).</p>
<p>For example, the following transition has not set the <code>to</code> and <code>from</code> properties, so the animation is always applied when changing between the two states (i.e&#x2e; when the mouse is pressed and released).</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">id</span>: <span class="name">rect</span>
      <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
      <span class="name">color</span>: <span class="string">&quot;red&quot;</span>

      <span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">id</span>: <span class="name">mouseArea</span>; <span class="name">anchors</span>.fill: <span class="name">parent</span> }

      <span class="name">states</span>: <span class="name">State</span> {
          <span class="name">name</span>: <span class="string">&quot;brighter&quot;</span>; <span class="name">when</span>: <span class="name">mouseArea</span>.<span class="name">pressed</span>
          <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">color</span>: <span class="string">&quot;yellow&quot;</span> }
      }

      <span class="name">transitions</span>: <span class="name">Transition</span> {
          <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
      }
  }

</pre>
<p>If the transition was changed to this:</p>
<pre class="qml">

  <span class="name">transitions</span>: <span class="name">Transition</span> {
      <span class="name">to</span>: <span class="string">&quot;brighter&quot;</span>
      <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
  }

</pre>
<p>The animation would only be applied when changing from the default state to the &quot;brighter&quot; state (i.e&#x2e; when the mouse is pressed, but not on release).</p>
<p>Multiple <code>to</code> and <code>from</code> values can be set by using a comma-separated string.</p>
<p><b>请参考 </b><a href="qml-qtquick-transition.html#reversible-prop">reversible</a>。</p>
</div></div><!-- @@@from -->
<br/>
<!-- $$$reversible -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="reversible-prop">
<td class="tblQmlPropNode"><p>
<a name="reversible-prop"></a><span class="name">reversible</span> : <span class="type"><a href="../qtqml/qml-bool.html">bool</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds whether the transition should be automatically reversed when the conditions that triggered this transition are reversed.</p>
<p>The default value is false.</p>
<p>By default, transitions run in parallel and are applied to all state changes if the <a href="qml-qtquick-transition.html#from-prop">from</a> and <a href="qml-qtquick-transition.html#to-prop">to</a> states have not been set. In this situation, the transition is automatically applied when a state change is reversed, and it is not necessary to set this property to reverse the transition.</p>
<p>However, if a <a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a> is used, or if the <a href="qml-qtquick-transition.html#from-prop">from</a> or <a href="qml-qtquick-transition.html#to-prop">to</a> properties have been set, this property will need to be set to reverse a transition when a state change is reverted. For example, the following transition applies a sequential animation when the mouse is pressed, and reverses the sequence of the animation when the mouse is released:</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">id</span>: <span class="name">rect</span>
      <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
      <span class="name">color</span>: <span class="string">&quot;steelblue&quot;</span>

      <span class="type"><a href="qml-qtquick-taphandler.html">TapHandler</a></span> { <span class="name">id</span>: <span class="name">tapHandler</span> }

      <span class="name">states</span>: <span class="name">State</span> {
          <span class="name">name</span>: <span class="string">&quot;brighter&quot;</span>
          <span class="name">when</span>: <span class="name">tapHandler</span>.<span class="name">pressed</span>
          <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">color</span>: <span class="string">&quot;lightsteelblue&quot;</span>; <span class="name">x</span>: <span class="number">50</span> }
      }

      <span class="name">transitions</span>: <span class="name">Transition</span> {
          <span class="name">to</span>: <span class="string">&quot;brighter&quot;</span>
          <span class="name">reversible</span>: <span class="number">true</span>
          <span class="type"><a href="qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> {
              <span class="type"><a href="qml-qtquick-propertyanimation.html">PropertyAnimation</a></span> { <span class="name">property</span>: <span class="string">&quot;x&quot;</span>; <span class="name">duration</span>: <span class="number">1000</span> }
              <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
          }
      }
  }

</pre>
<p>If the transition did not set the <code>to</code> and <code>reversible</code> values, then on the mouse release, the transition would play the <a href="qtquick-animation-example.html#propertyanimation">PropertyAnimation</a> before the <a href="qtquick-animation-example.html#coloranimation">ColorAnimation</a> instead of reversing the sequence.</p>
</div></div><!-- @@@reversible -->
<br/>
<!-- $$$running -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="running-prop">
<td class="tblQmlPropNode"><p>
<a name="running-prop"></a><span class="name">running</span> : <span class="type"><a href="../qtqml/qml-bool.html">bool</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds whether the transition is currently running.</p>
<p>This property is read only.</p>
</div></div><!-- @@@running -->
<br/>
<!-- $$$to -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="to-prop">
<td class="tblQmlPropNode"><p>
<a name="to-prop"></a><span class="name">to</span> : <span class="type"><a href="../qtqml/qml-string.html">string</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties indicate the state changes that trigger the transition.</p>
<p>The default values for these properties is &quot;*&quot; (that is, any state).</p>
<p>For example, the following transition has not set the <code>to</code> and <code>from</code> properties, so the animation is always applied when changing between the two states (i.e&#x2e; when the mouse is pressed and released).</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
      <span class="name">id</span>: <span class="name">rect</span>
      <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
      <span class="name">color</span>: <span class="string">&quot;red&quot;</span>

      <span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">id</span>: <span class="name">mouseArea</span>; <span class="name">anchors</span>.fill: <span class="name">parent</span> }

      <span class="name">states</span>: <span class="name">State</span> {
          <span class="name">name</span>: <span class="string">&quot;brighter&quot;</span>; <span class="name">when</span>: <span class="name">mouseArea</span>.<span class="name">pressed</span>
          <span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">color</span>: <span class="string">&quot;yellow&quot;</span> }
      }

      <span class="name">transitions</span>: <span class="name">Transition</span> {
          <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
      }
  }

</pre>
<p>If the transition was changed to this:</p>
<pre class="qml">

  <span class="name">transitions</span>: <span class="name">Transition</span> {
      <span class="name">to</span>: <span class="string">&quot;brighter&quot;</span>
      <span class="type"><a href="qml-qtquick-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span> }
  }

</pre>
<p>The animation would only be applied when changing from the default state to the &quot;brighter&quot; state (i.e&#x2e; when the mouse is pressed, but not on release).</p>
<p>Multiple <code>to</code> and <code>from</code> values can be set by using a comma-separated string.</p>
<p><b>请参考 </b><a href="qml-qtquick-transition.html#reversible-prop">reversible</a>。</p>
</div></div><!-- @@@to -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
